<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Welcome to Solid</title>
  <link rel="stylesheet" href="/common/css/bootstrap.min.css">
  <link rel="stylesheet" href="/common/css/solid.css">
</head>
<body>
<div class="container">
  <div class="page-header">
    <div class="pull-right">
      <a href="/register" class="btn btn-primary">Register</a>

      <button id="session-action" type="button" class="session-action btn btn-default">Loading...</button>
    </div>

    <h1>Welcome to the Solid Prototype</h1>
  </div>

  <p class="lead">
    This is a prototype implementation of a Solid server.

    It is a fully functional server, but there are no security or stability guarantees.

    If you have not already done so, please create an account.
  </p>

  <p class="lead hidden" id="loggedIn">
    You are logged in as
    <a href="#" id="profileLink"></a>.
  </p>

  <section>
    {{#if serverLogo}}
    <img src="{{serverLogo}}" />
    {{/if}}
    <h2>Server info</h2>
    <dl>
      <dt>Name</dt>
      <dd>{{serverName}}</dd>
      {{#if serverDescription}}
      <dt>Description</dt>
      <dd>{{serverDescription}}</dd>
      {{/if}}
      <dt>Details</dt>
      <dd>Running on <a href="https://solid.mit.edu/">Solid {{serverVersion}}</a> (<a href="https://solid.inrupt.com/docs">Documentation</a>)</dd>
    </dl>
  </section>
</div>
<script src="/common/js/solid-auth-client.bundle.js"></script>
<script>
  (function () {
    const elements = {};
    ['loggedIn', 'profileLink'].forEach(id => {
      elements[id] = document.getElementById(id)
    })
    var button = document.getElementById('session-action')
    var loggedIn = false

    solid.auth.trackSession(async session => {
      loggedIn = !!session;
      button.innerText = loggedIn ? 'Log out' : 'Log in';
      button.classList.remove('btn-default');
      button.classList.remove('btn-danger');
      button.classList.remove('btn-success');
      button.classList.add(loggedIn ? 'btn-danger' : 'btn-success');
      if (!session) {
        elements.loggedIn.classList.add('hidden')
      }
      else {
        elements.loggedIn.classList.remove('hidden')
        elements.profileLink.innerText = session.webId
        elements.profileLink.href = session.webId
      }
    })

    button.addEventListener('click', function () {
      loggedIn ? solid.auth.logout() : solid.auth.popupLogin()
    })
  })();
</script>
</body>
</html>
